<template>
  <demoBlock title="异步切换">
    <vcu-tabs v-model:active="active" :before-change="beforeChange">
      <vcu-tab title="标签 1">内容 1</vcu-tab>
      <vcu-tab title="标签 2">内容 2</vcu-tab>
      <vcu-tab title="标签 3">内容 3</vcu-tab>
      <vcu-tab title="标签 4">内容 4</vcu-tab>
    </vcu-tabs>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref(3);
    const beforeChange = (index) => {
      // 返回 false 表示阻止此次切换
      if (index === 1) {
        return false;
      }

      // 返回 Promise 来执行异步逻辑
      return new Promise((resolve) => {
        // 在 resolve 函数中返回 true 或 false
        resolve(index !== 3);
      });
    };
    return { active, beforeChange };
  },
});
</script>
